
 <div class="col-md-9"> 
    <div class="breadcrumbs" style="margin-top: 1%; margin-bottom: 1%;">
        <ul>
            <li><a href="<?php echo base_url("index.php/website/home"); ?>"><span class="glyphicon glyphicon-home"></span> Trang chủ</a></li>
            <li><a href="<?php echo base_url("index.php/website/activity"); ?>"><span class="glyphicon glyphicon-file"></span> Hoạt động</a></li>
        </ul>

    </div>
     <!--clock timer-->
    <div class="panel panel-warning">
        <center><h3><span class="glyphicon glyphicon-bullhorn nav-icon"></span><?php echo $activity['name_art']; ?></h3></center>
        <!-- Default panel contents -->
        <div class="panel-heading"><center><h5><span class="glyphicon glyphicon-time nav-icon"></span>
                        Thời gian còn lại</h5></center></div>
        <div class="panel-body">
            <!--clock-->
            <div class="clock clock-coundown" style="margin-left: auto; margin-right: auto;  width: 80%;"></div>
            <div id="message" class="well well-sm message ">
                <center><b>Hoạt động chưa diễn ra</b><center>
            </div>
        </div>
    </div>
    <div class="highlight">
        <div class="row">
            <div class="col-md-6" >
                <img src="
                    <?php   if (!file_exists($activity['url_image'])){
                              echo $activity['url_image'];
                            } 
                            echo base_url($activity['url_image']);
                    ?>" class="image_activity" style="width: 300px; height: 160px;">
            </div>
            <div class="col-md-6">

                <br>
                <p class="text-muted" style="font-size: 14px; font-weight: bold;">
                    <span class="glyphicon glyphicon-calendar nav-icon"></span>Ngày bắt đầu:<?php echo date('H:i d/m/Y', strtotime($activity['startday'])); ?>
                </p>
                <p class="text-muted" style="font-size: 14px; font-weight: bold;">
                    <span class="glyphicon glyphicon-calendar nav-icon"></span>Ngày kết thúc: <?php echo date('H:i d/m/Y', strtotime($activity['endday'])); ?>
                </p>
                <p class="text-muted" style="font-size: 14px; font-weight: bold;">
                    <span class="glyphicon glyphicon-road nav-icon"></span>Địa điểm tổ chức:
                    <a target="blank" href="<?php echo base_url('index.php/website/center/loadById/' . $activity['id_center']); ?>"> <?php echo $activity['name']; ?>
                    </a>
                </p>
                <p class="text-muted" style="font-size: 14px; font-weight: bold;">
                    <span class="glyphicon glyphicon-eye-open nav-icon"></span>Số lượt xem: <?php echo $activity['view']; ?>
                </p>

            </div>
            
        </div>
        <hr>
        <div class="row content">
            <p>
                <?php echo $activity['discription'] ?>
            </p>
        </div>
    </div>
     <div class="highlight">
        <h3>
            <strong><em>Bình luận</em></strong>
        </h3>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#facebook" role="tab" data-toggle="tab">Facebook</a></li>
            <li><a href="#website"  role="tab" data-toggle="tab">Website</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane fade in active" id="facebook">
                <div id="fb-root"></div>
                <script>(function(d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id))
                            return;
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=1456817287931576&version=v2.0";
                        fjs.parentNode.insertBefore(js, fjs);
                    }(document, 'script', 'facebook-jssdk'));</script>
                <div class="fb-comments" data-width="780px" data-href="<?= base_url('index.php/website/activity/id/' . $activity['id_activity']); ?>" data-numposts="5" data-colorscheme="light"></div>
            </div>
            <div class="tab-pane fade" id="website">
                <div>
                    <input type="hidden"  value="<?= base_url(); ?>" id='baseurl' />
                    <div class="panel panel-info" style="padding: 10px;">
                        <?php
                        $this->load->library('session');
                        $sess = $this->session->userdata('logged_in');
                        if ($sess['sign_in'] == TRUE) :
                            $attr = array('class' => 'submitComment');
                            echo form_open('/website/activity/add_comment', $attr);
                            ?>
                            <!-- Content 'comment' -->
                            <textarea 
                                style="background-color: #EEF9D9"
                                class="form-control" rows="3" id="comment_noidung" name="comment" 
                                placeholder="Trả lời tại đây ..."></textarea>
                            <br>
                            <p id="attention" class="text-danger" style="font-size:15px; display: none">Nội dung trả lời không được để trống.</p>
                            <!-- Content 'comment' -->
                            <input type="hidden" name="id_activity" value="<?= $activity['id_activity']; ?>">
                            <div class="text-right">
                                <button type="submit" class="btn btn-primary">Bình luận</button>
                            </div>
                                <?php echo form_close(); ?>
                            <?php else : ?>
                            <div class="text-center">Đăng nhập để được tham gia bình luận.<br>
                                <?php echo form_open('/website/thanhvien/registration/load_login'); ?>
                                <button type="submit" name="submit" class="btn btn-primary" value="2">Đăng Nhập</button>
                            <?php echo form_close(); ?>
                            </div>
<?php endif; ?>
                    </div>
                    <div class="panel panel-info" style="padding: 2px;">
                        <div id="insertBeforeMe"></div>
                        <?php
                        if (!empty($comment)) {
                            foreach ($comment as $row):
                                ?>
                                <div class="panel panel-default" style="padding: 5px; margin: 1px;">
                                    <div class="panel-body" style="padding-top: 0px; padding-bottom: 0px; margin: 2px;">
                                        <div class="col-lg-1" style="padding-left: 0px;">
                                            <img src="<?php
                                            if (!file_exists($row['url_image'])) {
                                                if ($row['id_sex'] == 1) {
                                                    $row['url_image'] = 'public/images/defaut_user/default-user.jpg';
                                                } else {
                                                    $row['url_image'] = 'public/images/defaut_user/default-user-female.jpg';
                                                }
                                            }
                                            echo base_url($row['url_image']);
                                            ?>.png" height="40" width="40">
                                        </div>
                                        <div class="col-lg-11">
                                            <strong><?= $row['firstname'] . ' ' . $row['lastname']; ?></strong><br>
        <?= $row['content'] . '.'; ?>
                                        </div>
                                    </div>
                                </div>
                                <?php
                            endforeach;
                        } else {
                            echo '<div class="text-center"><em>Hãy tham gia trả lời nhé.</em></div>';
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>
<!--danh sách hoạt động khác-->
<div class="col-md-3">
    <div class="row" style="margin-top: 50px;">
        <div class="panel panel-warning">
            <!-- Default panel contents -->
            <div class="panel-heading">Các hoạt động liên quan</div>
            <div class="panel-body">

                <?php foreach ($listActForCenter as $row): ?>
                <ul class="list-group">
                        <a class="list-group-item" href="<?php echo base_url("index.php/website/hoatdong/load_by_id/".$row['id_activity']);?>" target="blank">
                            <?php echo $row['name']?>
                        </a>
                </ul>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>
<!--script count down timer-->
<script>
    $(document).ready(function() {
        var clock;
        var currentday = new Date();
        var time_current = Math.round(currentday.getTime() / 1000);
        var time_end = <?php echo strtotime($activity['endday']) ?>;
        var time_start = <?php echo strtotime($activity['startday']) ?>;
        var time1 = time_end - time_current;
        var time2 = time_start - time_current;
        if (time_current >= time_end && time_current > time_start) {
            clock = $('.clock').FlipClock({
                clockFace: 'DailyCounter',
                autoStart: false,
                callbacks: {
                    stop: function() {
                        $('.message').html('<center><b>Hoạt động đã kết thúc</b><center>')
                    }
                }
            });

            clock.setTime(0);
            clock.setCountdown(true);
            clock.start();
        }
        else if (time_current < time_end && time_current >= time_start) {
            document.getElementById("message").innerHTML = '<center><b>Hoạt động đang diễn ra</b><center>';
            clock = $('.clock').FlipClock({
                clockFace: 'DailyCounter',
                autoStart: false,
                callbacks: {
                    stop: function() {
                        $('.message').html('<center><b>Hoạt động đã kết thúc</b><center>')
                    }
                }
            });

            clock.setTime(time1);
            clock.setCountdown(true);
            clock.start();
        }
        else {
            clock = $('.clock').FlipClock({
                clockFace: 'DailyCounter',
                autoStart: false,
                callbacks: {
                    stop: function() {
                        $('.message').html('<center><b>Hoạt động đang diễn ra</b><center>')
                    }
                }
            });

            clock.setTime(time2);
            clock.setCountdown(true);
            clock.start();
        }
        console.log(currentday);

    });
</script> 
<!--end script-->